<template>
  <div>
    <div class="dataModel dataone">
      <div class="dataHead">
        <i class="iconfont icon-xiangyou"></i>
        街道三实
      </div>
      <div class="dataBody">
        <div class="content">
          <i class="iconfont icon-xiaofanghujiguanli"></i>
          <div class="data">{{ dataList.household }}</div>
          <div>实有户籍</div>
        </div>
        <div class="content">
          <i class="iconfont icon-shiyourenkou"></i>
          <div class="data">{{ dataList.population }}</div>
          <div>实有人口</div>
        </div>
        <div class="content">
          <i class="iconfont icon-home"></i>
          <div class="data">{{ dataList.housing }}</div>
          <div>实有住房</div>
        </div>
      </div>
    </div>
    <div class="dataModel datatwo">
      <div class="dataHead">
        <i class="iconfont icon-xiangyou"></i>
        特殊家庭
      </div>
      <div class="dataBody">
        <div class="content">
          <i class="iconfont icon-biaojiyinanjuan"></i>
          <div class="data">{{ dataList.difficult }} 户</div>
          <div>困难家庭</div>
        </div>
        <div class="content">
          <i class="iconfont icon-gerendangan"></i>
          <div class="data">{{ dataList.record }} 户</div>
          <div>建档立卡</div>
        </div>
        <div class="content">
          <i class="iconfont icon-kunnancanjiren"></i>
          <div class="data">{{ dataList.disability }} 人</div>
          <div>残疾人口</div>
        </div>
      </div>

      <div class="dataBody">
        <div class="content">
          <i class="iconfont icon-wurenzhishou"></i>
          <div class="data">{{ dataList.nolabor }} 人</div>
          <div>无劳动力</div>
        </div>
        <div class="content">
          <i class="iconfont icon-kongchaolaoren"></i>
          <div class="data">{{ dataList.lonelyold }} 人</div>
          <div>孤寡老人</div>
        </div>
        <div class="content">
          <i class="iconfont icon-nongcunliushouertong"></i>
          <div class="data">{{ dataList.behindchildren }} 人</div>
          <div>留守儿童</div>
        </div>
      </div>

      <div class="dataBody">
        <div class="content">
          <i class="iconfont icon-kongchaolaoren"></i>
          <div class="data">{{ dataList.oldman }} 人</div>
          <div>空巢老人</div>
        </div>
        <div class="content">
          <i class="iconfont icon-10"></i>
          <div class="data">{{ dataList.seriously }} 户</div>
          <div>大病家庭</div>
        </div>
        <div class="content">
          <i class="iconfont icon-sanjuguer"></i>
          <div class="data">{{ dataList.orphan }} 人</div>
          <div>孤儿</div>
        </div>
      </div>
    </div>

    <div class="dataModel">
      <div class="dataHead">
        <i class="iconfont icon-xiangyou"></i>
        安防力量
      </div>
      <div class="dataBody">
        <div class="content">
          <i class="iconfont icon-weixianqu red-danger"></i>
          <div class="data">{{ dataList.dangerous }}</div>
          <div>危险人员</div>
        </div>
        <div class="content">
          <i class="iconfont icon-jiankong"></i>
          <div class="data">{{ dataList.monitor }}</div>
          <div>安防监控</div>
        </div>
        <div class="content">
          <i class="iconfont icon-anfang"></i>
          <div class="data">{{ dataList.security }}</div>
          <div>治安力量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Basicdata from "./data";
export default {
  name: "rightEchart",
  data() {
    return {
      dataList: Basicdata.dataList,
    };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.dataModel {
  // padding: 5px;
  // background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  cursor: default;
}
.dataHead {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #fff;
  padding: 5px 0px;
}
.dataBody {
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #bbc2fb;
}
.content {
  min-width: 70px;
  padding: 12px;
  background: #262839;
  border-radius: 5px;
  margin: 5px 0;
}
.content i {
  font-size: 48px;
  color: #477eff;
}
.content .data {
  font-weight: bold;
  padding: 2px 0;
  font-size: 18px;
}
.dataone {
  margin: 0 0 15px 0;
}
.datatwo {
  margin: 0 0 15px 0;
}
.red-danger {
  color: #ed6262 !important;
}
</style>
